<template>
	<div class="resource_list" @click.stop="handleClickSelect()">
		<el-checkbox-group v-model="checkedResource">
			<template v-if="data.length > 0">
				<el-row :gutter="6">
					<el-col :span="responsive" v-for="(item, index) in resourceListData" :key="index">
						<div class="link" v-if="item.isLocal === 2">
							<i class="iconfont icon-link-badge"></i>
						</div>
						<div :class="['lock', `level${item.resLevel}`]" v-if="item.resLevel !== 1">
							<i class="iconfont icon-lock-badge"></i>
						</div>
						<div class="collect" v-if="item.isCollect === 1">
							<i class="iconfont icon-interactive-star-on"></i>
						</div>
						<div class="status" v-if="item.isFolder !== 1">
							<i
								class="iconfont icon-interactive-refresh"
								:class="item.transcodeStatus | transcodeStatusFilter"
								:title="item.transcodeStatus | transcodeTitleFilter"
								v-if="item.transcodeStatus === 2 || item.transcodeStatus === 3"
							></i>
							<i
								class="iconfont icon-general-review"
								:class="item.auditStatus | auditStatusFilter"
								:title="item.auditStatus | auditTitleFilter"
								v-if="item.auditStatus === 3 || item.auditStatus === 4"
							></i>
						</div>
						<el-checkbox :label="item.id">&nbsp;</el-checkbox>
						<dl @dblclick="handleToDetail(item)" @contextmenu="handleContextMenu(item, null, $event)" @click.stop="handleClickSelect(item)">
							<dt class="img">
								<template v-if="item.showType === 1">
									<img :src="item | fileTypeIcon" />
								</template>
								<template v-else>
									<svg-icon :icon-name="item | fileTypeIcon"></svg-icon>
								</template>
							</dt>
							<dd :title="data.oldName">{{ item.oldName }}</dd>
						</dl>
					</el-col>
				</el-row>
			</template>
			<template v-else>
				<el-empty :image-size="200" description="暂无资源文件"></el-empty>
			</template>
		</el-checkbox-group>
	</div>
</template>

<script>
import resourceMixin from '../mixins/resource';
import contextMenuMixin from '../mixins/contextMenu';
export default {
	mixins: [resourceMixin, contextMenuMixin],
	created() {
		this.judgePressCtrl();
	},
	data() {
		return {
			responsive: 200,
			isCtrl: false
		};
	},
	filters: {
		auditStatusFilter(input) {
			if (input === 1) {
				return 'success';
			} else if (input === 2) {
				return 'waiting';
			} else if (input === 3) {
				return 'nopass';
			} else if (input === 4) {
				return 'auditing';
			}
		},
		transcodeStatusFilter(input) {
			if (input === 1) {
				return 'success';
			} else if (input === 2) {
				return 'going';
			} else if (input === 3) {
				return 'failure';
			}
		},
		auditTitleFilter(input) {
			if (input === 1) {
				return '已通过';
			} else if (input === 2) {
				return '待审核';
			} else if (input === 3) {
				return '不通过';
			} else if (input === 4) {
				return '审核中';
			}
		},
		transcodeTitleFilter(input) {
			if (input === 1) {
				return '已完成';
			} else if (input === 2) {
				return '转码中';
			} else if (input === 3) {
				return '转码失败';
			}
		}
	},
	watch: {
		checkedResource(arr) {
			this.$emit('input', arr);
		}
	},
	mounted() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
	},
	methods: {
		//判断是否按下Ctrl
		judgePressCtrl() {
			// 用户按下ctrl后变量isCtrl为true
			document.onkeydown = (e) => {
				let el = e || window.event || arguments.callee.caller.arguments[0];
				if (el.keyCode === 17) {
					this.isCtrl = true;
				}
			};
			// 用户松开ctrl后变量isCtrl为false
			document.onkeyup = (e) => {
				let el = e || window.event || arguments.callee.caller.arguments[0];
				if (el.keyCode === 17) {
					this.isCtrl = false;
				}
			};
		},

		//双击事件
		handleDblclick(data) {
			if (data.isFolder === '1') {
				this.$router.push({ path: this.fullPath, query: { folder: data.id } });
			} else {
				let routeData = this.$router.resolve({ path: '/data/resource/' + data.id });
				window.open(routeData.href, '_blank');
			}
		},

		//单击选中
		handleClickSelect(data) {
			if (!data) {
				this.checkedResource = [];
			} else if (!this.isCtrl) {
				this.checkedResource = [data.id];
			} else {
				let index = this.checkedResource.findIndex((item) => item === data.id);
				if (index === -1) {
					this.checkedResource.push(data.id);
				} else {
					this.checkedResource.splice(index, 1);
				}
			}
		},

		//动态修改列
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			if (width >= 1200) {
				this.responsive = 200;
				this.$set(this.queryData, 'limit', 60);
				this.pageSizes = [60, 120, 240];
			}
			if (width > 1290) {
				this.responsive = 210;
				this.$set(this.queryData, 'limit', 70);
				this.pageSizes = [70, 140, 280];
			}
			if (width > 1380) {
				this.responsive = 220;
				this.$set(this.queryData, 'limit', 80);
				this.pageSizes = [80, 160, 320];
			}
			if (width > 1470) {
				this.responsive = 230;
				this.$set(this.queryData, 'limit', 90);
				this.pageSizes = [90, 180, 360];
			}
			if (width > 1560) {
				this.responsive = 240;
				this.$set(this.queryData, 'limit', 100);
				this.pageSizes = [100, 200, 400];
			}
			if (width > 1650) {
				this.responsive = 250;
				this.$set(this.queryData, 'limit', 110);
				this.pageSizes = [110, 220, 440];
			}
			if (width > 1740) {
				this.responsive = 260;
				this.$set(this.queryData, 'limit', 120);
				this.pageSizes = [120, 240, 480];
			}
			if (width > 1830) {
				this.responsive = 270;
				this.$set(this.queryData, 'limit', 130);
				this.pageSizes = [130, 260, 520];
			}
			if (width > 1920) {
				this.responsive = 280;
				this.$set(this.queryData, 'limit', 140);
				this.pageSizes = [140, 280, 560];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_list::v-deep {
	position: relative;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;

	.el-col {
		position: relative;
		margin-bottom: 6px;

		&:hover {
			dl {
				background-color: var(--primary-background-hover);
			}

			.el-button {
				display: block;
			}

			.el-checkbox {
				display: inline-flex;
			}
		}
	}

	.el-col-200 {
		width: 16.6666%;
	}

	.el-col-210 {
		width: 14.2766%;
	}

	.el-col-220 {
		width: 12.5%;
	}

	.el-col-230 {
		width: 11.1106%;
	}

	.el-col-240 {
		width: 10%;
	}

	.el-col-250 {
		width: 9.0909%;
	}

	.el-col-260 {
		width: 8.3333%;
	}

	.el-col-270 {
		width: 7.6923%;
	}

	.el-col-280 {
		width: 7.1429%;
	}

	.el-empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 14px;
		color: #606266;
	}

	.el-checkbox {
		position: absolute;
		top: 10px;
		left: 13px;
		display: none;
	}

	.el-checkbox__label {
		display: none;
	}

	.el-checkbox.is-checked {
		display: inline-flex;

		& + dl {
			background-color: var(--primary-border-plain-disabled);
		}
	}

	i.iconfont {
		display: block;
		padding: 3px;
		font-size: 14px;

		&.icon-interactive-star-on,
		&.auditing,
		&.going {
			color: #e6a23c;
		}

		&.icon-link-badge {
			color: #606266;
		}

		&.success {
			color: #67c23a;
		}

		&.waiting {
			color: #909399;
		}

		&.nopass,
		&.failure {
			color: #f00;
		}

		&.going {
			animation: rotate 2s linear 0ms infinite normal forwards;
		}
	}

	.collect,
	.status {
		position: absolute;
		right: 10px;
		z-index: 2;
	}

	.collect {
		top: 7px;
	}

	.status {
		bottom: 54px;
	}

	.link {
		position: absolute;
		top: -3px;
		left: 0;

		i {
			font-size: 24px;
		}
	}

	.lock {
		position: absolute;
		top: -3px;
		right: 0;

		&.level2 {
			color: #67c23a;
		}

		&.level3 {
			color: #e6a23c;
		}

		&.level4 {
			color: #f56c6c;
		}

		i {
			font-size: 24px;
		}
	}

	dl {
		padding: 10px 10px 7px;
		border-radius: 4px;
		cursor: pointer;
		user-select: none;
	}

	dt.img {
		position: relative;
		width: 60%;
		padding-top: 60%;
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;

		img,
		svg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		img {
			object-fit: cover;
			border-radius: 4px;
		}
	}

	dd {
		height: 40px;
		color: #606266;
		font-size: 14px;
		line-height: 20px;
		margin-top: 6px;
		text-align: center;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-359deg);
	}
}
</style>
